<template>
	<view class="viewDetailsPage" v-if="amountLogInfo">
		<view class="viewDetailsTop flex-column border-bottom-f7f7f7" >
			<view class="flex-column  ">
				<image class="avatar" :src="amountLogInfo.avatar" mode=""></image>
			<!-- 	<view class="padding_20rpx_0">
					手机号:{{amountLogInfo.phone?amountLogInfo.phone:'--'}}
				</view> -->
				<view class="padding_20rpx_0">
					昵称:{{amountLogInfo.nickname}}
				</view>
				<view style="color: rgb(255, 0, 0);" class="font-weight_bold  ">
					￥{{amountLogInfo.amount}}
				</view>
			</view>

		</view>
		<view class="padding_40rpx  viewDetails "  v-if="amountLogInfo.operate_type==8||amountLogInfo.operate_type==9||amountLogInfo.operate_type==18||amountLogInfo.operate_type==19">

			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					订单编号：
				</view>
				<view class="font-overflow" style="color: rgb(80, 77, 78);">
					<text>{{amountLogInfo.goods_order.sn_order}}</text>
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					下单时间：
				</view>
				<view class="font-overflow" style="color: rgb(80, 77, 78);">
					{{amountLogInfo.goods_order.create_time}}
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					支付状态：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{orderStatusFn(amountLogInfo.goods_order.status)}}
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					支付方式：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{payStatusFn(amountLogInfo.goods_order.pay_way) }}
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					价格：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{amountLogInfo.goods_order.total_price}}

				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					会员折扣：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{Number(amountLogInfo.goods_order.discount_ratio)/10 }}折
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					优惠：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{Number(amountLogInfo.goods_order.discount_amount)}}元
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					折扣价格：
				</view>
				<view class="font-overflow font-weight_bold" style="color:rgb(255, 0, 0);">
					{{Number(amountLogInfo.goods_order.coupon_deduction_amount)}}元
				</view>
			</view>
			<view class="flex-between  padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					积分折扣：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{Number(amountLogInfo.goods_order.point_deduction_amount?amountLogInfo.goods_order.point_deduction_amount:'0')}}元
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					实付款：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{Number(amountLogInfo.goods_order.reality_amount)}}元
				</view>
			</view>

		</view>
		<view class="padding_40rpx  margin-top_20rpx background-color_FFFFFF"  v-if="amountLogInfo.operate_type==8||amountLogInfo.operate_type==9||amountLogInfo.operate_type==18||amountLogInfo.operate_type==19">
			<view class="flex-start-center">
				<text class="rectangle"></text>
				<text style="font-size: 30rpx;font-weight: 600;">所购商品</text>
			</view>
			<view class="flex-end-top margin-top_30rpx">
				<view class="">
					<image class="orderImg" :src="amountLogInfo.goods_order.host_img[0]" mode=""></image>
				</view>
				<view class="margin-left_16rpx flex-columns" style="width:488rpx;height: 180rpx;">
					<view class="font-overflow2" style="width: 100%;">
						{{amountLogInfo.goods_order.goods_name}}                                                                                                          
		
		
					</view>
					<view class="padding_10rpx_0 font-overflow" style="width: 100%;">
						<text
							style="color: rgb(153, 153, 153);">{{amountLogInfo.goods_order.title}}</text>
						<!-- <text style="color: rgb(153, 153, 153);font-overflow2">原价:{{Number(item.coupon_deduction_amount)+Number(item.discount_amount)}}元</text> -->
					</view>
					<view class="flex-between">
						<view class="" v-if="">
							价格:{{amountLogInfo.goods_order.total_price}}元
						</view>
						<view class="">
							数量：x{{amountLogInfo.goods_order.number}}
						</view>
					</view>
				</view>
			</view>
		
		</view>
		<view class="padding_40rpx  viewDetails "  v-if="amountLogInfo.operate_type==1||amountLogInfo.operate_type==2
             ||amountLogInfo.operate_type==3||amountLogInfo.operate_type==4||
             amountLogInfo.operate_type==5||amountLogInfo.operate_type==6||
             amountLogInfo.operate_type==7||amountLogInfo.operate_type==21||
             amountLogInfo.operate_type==22||amountLogInfo.operate_type==23||
             amountLogInfo.operate_type==24||amountLogInfo.operate_type==25||
             amountLogInfo.operate_type==26||amountLogInfo.operate_type==27">
		
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					订单编号：
				</view>
				<view class="font-overflow" style="color: rgb(80, 77, 78);">
					<text>{{amountLogInfo.order_sn}}</text>
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					下单时间：
				</view>
				<view class="font-overflow" style="color: rgb(80, 77, 78);">
					{{amountLogInfo.create_time}}
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					充值金额：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{amountLogInfo.amount  }}
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					赠送金额：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{amountLogInfo.give_amount  }}
				</view>
			</view>
		
		
		</view>
		<view class="padding_40rpx  viewDetails "  v-if="amountLogInfo.operate_type==10||amountLogInfo.operate_type==11||amountLogInfo.operate_type==12||amountLogInfo.operate_type==13||amountLogInfo.operate_type==14||amountLogInfo.operate_type==15||amountLogInfo.operate_type==16||amountLogInfo.operate_type==17">

			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					订单编号：
				</view>
				<view class="font-overflow" style="color: rgb(80, 77, 78);">
					<text>{{amountLogInfo.package_order.order_sn}}</text>
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					下单时间：
				</view>
				<view class="font-overflow" style="color: rgb(80, 77, 78);">
					{{amountLogInfo.package_order.create_time}}
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					套餐卡名称：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{amountLogInfo.package_order.name }}
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					套餐描述：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{amountLogInfo.package_order.desc }}
				</view>
			</view>


			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					原始价格：
				</view>
				<view class="font-overflow" style="color:  rgb(255, 0, 0);">
					{{Number(amountLogInfo.package_order.original_price)}}元
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					会员折扣：
				</view>
				<view class="font-overflow" style="color: rgb(255, 0, 0);">
					{{Number(amountLogInfo.package_order.discount_ratio)/10}}折
				</view>
			</view>
			<view class="flex-between padding-bottom_40rpx">
				<view style="color: rgb(0, 0, 0);">
					实付款：
				</view>
				<view class="font-overflow font-weight_bold" style="color: rgb(255, 0, 0);">
					{{amountLogInfo.package_order.price}}

				</view>
			</view>

		</view>
		<view class="padding_40rpx  margin-top_20rpx background-color_FFFFFF" v-if="amountLogInfo.operate_type==10||amountLogInfo.operate_type==11||amountLogInfo.operate_type==12||amountLogInfo.operate_type==13||amountLogInfo.operate_type==14||amountLogInfo.operate_type==15||amountLogInfo.operate_type==16||amountLogInfo.operate_type==17">
			<view class="flex-start-center">
				<text class="rectangle"></text>
				<text style="font-size: 30rpx;font-weight: 600;">所购套餐</text>
			</view>
			<view class="packageCardArr" :style="{ '--bg-image': `url(${amountLogInfo.package_order.style})` }">
				<view class="flex-start-center "
					style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20rpx;">

					<image class="avatar" :src="amountLogInfo.package_order.logo" mode=""></image>

					<view class=" flex-column-between-start margin-left_10rpx">
						<text class="font-overflow centerText price font-weight_bold">
							{{amountLogInfo.package_order.name}}
						</text>
						<text
							class="font-overflow centerText price font-weight_bold">{{amountLogInfo.package_order.desc}}</text>

					</view>


				</view>
				<view class="margin-top_20rpx">
					<text
						class="font-overflow centerText  priceText font-weight_bold margin-right_16rpx">{{'已有'+amountLogInfo.package_order.sales_volume+'人付款'}}</text>
					<text
						class="font-overflow centerText  priceText font-weight_bold">充值金额：{{amountLogInfo.package_order.sales_amount}}</text>
				</view>

			</view>

		</view>



	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				form: {
					feedbackContent: ''
				},
				withdrawal: null,
				token: uni.getStorageSync('login').token,
				form: {
					id: '',
					remark: ''
				},
				amountLogInfo: null

			}
		},
		onLoad(options) {
			console.log(options)
			this.withdrawal = options
			// 获取用户详情

			console.log(options)
			this.amountLogInfoFn(options.id)
			
		},
		computed: {
			// 订单状态
			orderStatusFn: function() {
				return function(status) {
			
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '待付款' : status == 1 ? '待付款' : status == 2 ? '已支付' : status == 3 ? '待发货' :
						status == 4 ? '待收货' : status == 5 ? '退款中' : status == 6 ? '已完成' : status == 7 ? '已退款' :
						'已取消';
					return orderStatus;
				};
			},
			payStatusFn: function() {
				return function(status) {
			
					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '余额支付' : status == 1 ? '余额支付' : status == 2 ? '微信在线支付' : status == 3 ? '微信线下充值' :
						status == 4 ? '支付宝充值' : status == 5 ? '现金充值' : status == 6 ? 'pos充值' : status == 7 ? '微信线上扫码充值' :
						'支付宝在线扫码充值';
					return orderStatus;
				};
			},
		},
		methods: {
			async amountLogInfoFn(ids) {
				const res = await this.$http.post({
					url: this.$api.amountLogInfo,
					data: {

						id: ids
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				console.log(res)
				if (res.code == 0) {
					console.log(res.data)
					if (res.data.operate_type==10||res.data.operate_type==11||res.data.operate_type==12||res.data.operate_type==13
            ||res.data.operate_type==14||res.data.operate_type==15||res.data.operate_type==16||res.data.operate_type==17) {
						this.amountLogInfo = res.data
					} else if (res.data.operate_type==1||res.data.operate_type==2
             ||res.operate_type==3||res.data.operate_type==4||
             res.data.operate_type==5||res.data.operate_type==6||
             res.data.operate_type==7||res.data.operate_type==21||
             res.data.operate_type==22||res.data.operate_type==23||
             res.data.operate_type==24||res.data.operate_type==25||
             res.data.operate_type==26||res.data.operate_type==27) {

						this.amountLogInfo = res.data
					} else {
						res.data.goods_order.host_img = res.data.goods_order.host_img.split(',').map((item) => item
							.trim());
						this.amountLogInfo = res.data
					}

					// this.amountLogInfo = res.data

					// 跳转到登录页面



				} else {


				}
			},
			withdrawalReject() {
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.form.remark) {
							this.$sun.toast("请输入驳回原因", 'none')
							this.$at.releaseKey('submit');
						} else {


							console.log((this.form))

							const res = await this.$http.post({
								url: this.$api.withdrawalReject,
								data: {

									...this.form
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							console.log(res)
							if (res.code == 0) {



								// 跳转到登录页面
								this.$at.releaseKey('submit');
								this.$sun.toast(res.msg, 'none')

								setTimeout(() => {
									this.$sun.navBack()
								}, 500)
							} else {
								this.$at.releaseKey('submit');
								this.$sun.toast(res.msg, 'none')
							}
						}

					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.viewDetailsPage {
		.viewDetailsTop {
			width: 750rpx;
			padding: 40rpx 0;
			background: rgb(255, 255, 255);

			.avatar {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
			}
		}

		.viewDetails {
			background: rgb(255, 255, 255);
		}

	}

	.orderImg {
		width: 90px;
		height: 90px;
		border-radius: 10px;


	}

	.packageCardArr {
		position: relative;
		margin-top: 32rpx;
		padding: 25rpx 20rpx;
		height: 108px;
		border-radius: 20rpx;
		background-repeat: no-repeat;
		background-size: cover;

		background-image: (var(--bg-image));
		// background-image: url('../../../static/套餐卡背景/矩形 1591.png');

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.rechargeBtn {
			width: 110rpx;
			height: 52rpx;
			border-radius: 20rpx;
			z-index: 999;
			background: rgb(255, 255, 255);
		}

		.rechargeBtn-noListing {
			width: 110rpx;
			height: 52rpx;
			border-radius: 20rpx;


		}

		.centerText {
			width: 438rpx;
		}

		.price {
			color: #fff;
			font-size: 30rpx;
			font-weight: 700;
		}

		.priceText {
			color: rgb(255, 255, 255);
			font-size: 24rpx;
			font-weight: 400;
		}
	}

	.packageCardArr::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background: rgba(0, 0, 0, 0.1);
		/* 半透明黑色背景 */
	}

	.rectangle {
		width: 9rpx;
		height: 30rpx;
		background: #1677FF;
		display: inline-block;
		margin-right: 15rpx;
	}

	.bottomFixed {
		background: rgb(255, 255, 255);
		padding: 18rpx;
		height: 128rpx;
		position: fixed;
		bottom: 0;
		width: 750rpx;

		.reset {
			width: 260rpx;
			height: 88rpx;
			background: rgb(255, 0, 0);
			color: rgb(255, 255, 255);
		}

		.confirm {
			width: 428rpx;
			height: 88rpx;
			background-color: rgb(42, 137, 255);
			color: rgb(255, 255, 255);

			font-size: 32rpx;
			font-weight: 400;
		}
	}

	page {
		background: #f6f6f6;
	}
</style>